<template>
  <div id="echartMap" :style="{height:height + 'px', width: width}" />
</template>

<script>
import * as echarts from 'echarts'
import { jsCountDealArea } from '@/api/base/deal/dealBase'
import china from '@/map/china.json'
echarts.registerMap('china', china)
import resize from './mixins/resize'
export default {
  name: 'Map',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      chart: undefined,
      charData: [],
      max: 0
    }
  },
  mounted() {
    jsCountDealArea().then((response) => {
      this.charData = response.data
      if (this.charData.length > 0) {
        var arr = []
        this.charData.forEach(v => {
          arr.push(v.count)
        })
        this.max = Math.max(...arr)
      }
      this.drawLine()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = undefined
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('echartMap'))
      // 绘制图表
      this.chart.setOption({
        title: {
          text: this.title,
          left: 'left',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 15,
            fontWeight: 'bolder',
            color: '#333'
          },
          padding: 20
       },
        tooltip: {
          trigger: 'item',
          formatter: function(val) {
            if (isNaN(val.value)) {
              if (val.data) {
                return (window.i18n.t(val.name) + '</br>投资项目:' + val.data.value + window.i18n.t('个'))
              }
            } else {
              if (val.data) {
                return (window.i18n.t(val.name) + '</br>投资项目:' + val.data.value + window.i18n.t('个'))
              }
            }
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          right: '17',
          top: '10',
          feature: {
            restore: {}
          }
        },
        geo: {
          show: true,
          map: 'china',
          zoom: 1,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          scaleLimit: {
            min: 1.5,
            max: 7
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              areaColor: '#D2EAFF',
              borderColor: '#fff'
            },
            emphasis: {
              areaColor: '#FFAE00'
            }
          },
          bottom: '10px'
        },
        dataRange: {
          show: false,
          max: this.max,
          min: 0,
          x: 'right',
          y: 'center',
          padding: 25,
          itemWidth: 14,
          itemHeight: 60,
          text: [this.$t('高'), this.$t('低')],
          calculable: true,
          color: ['#0077ff', '#c7e4ff']
        },
        grid: {
          left: '10%',
          top: '20%',
          right: '10%'
        },
        series: [
          {
            name: this.$t('已投项目'),
            type: 'map',
            mapType: 'china',
            zoom: 1,
            geoIndex: 0,
            showLegendSymbol: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data: this.charData.map((ele) => {
              return { name: ele.areaName, value: ele.count, areaId: ele.areaId, amount: ele.amount }
            })
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
</style>
